<template>
	<view class="page reservation_page">
		<searchDown search-type="location" :isDrop="isDrop" :selectHeight="selectHeight" :isRecover="false"
			:selectItem="selectItem" screenTabType="reservation" @getScreenItem="getScreenItem" ref='searchDown'>
			<template #reservation>
				<view class="reservation_select_type">
					<view class="reservation_select_type_item" :class="{'active':item.id == chooseReservationSelectType}"
						v-for="item in typeList" :key="item.id" @click="getReservationSelect(item)">
						<view class="item_icon">
							<image :src="item.icon" mode="scaleToFill"></image>
						</view>
						<view class="item_text">
							{{item.lable}}
						</view>
					</view>
				</view>
			</template>
		</searchDown>
		<view class="list">
			<hospitalItem></hospitalItem>
		</view>
	</view>
</template>

<script>
	import {
		queryAppointDoctorList
	} from '@/api/index.js'
	export default {
		data() {
			return {
				isDrop: false,
				selectHeight: 224,
				selectItem: {},
				chooseReservationSelectType: 0,
				typeList: [{
					name: 'disease',
					lable: '按疾病',
					icon: '../../static/icon/search/jb-icon.png',
					type: 1,
					id: 1
				}, {
					name: 'department',
					lable: '按科室',
					icon: '../../static/icon/search/ks-icon.png',
					type: 1,
					id: 2
				}, {
					name: '',
					lable: '按医院',
					icon: '../../static/icon/search/yy-icon.png',
					type: 1,
					id: 3
				}],
			}
		},
		onLoad() {
			// this.getAppointDoctorList()
			// 先筛选 后展示
			this.getReservationSelect(this.typeList[0])
		},
		methods: {
			getScreenItem(value) {
				let search = {}
				if (value.parentId) {
					search.departId = value.id
				} else if (value.departId) {
					search.proficientDiseases = value.id
				}
				search.title = value.name
				if (this.selectItem.id != 3) {
					uni.navigateTo({
						url: `/pagesCommon/reservation/reservationList?search=${JSON.stringify(search)}`
					})
				}
			},
			// 获取预约筛选类型
			getReservationSelect(value) {
				this.chooseReservationSelectType = value.id
				this.selectItem = value

				// 医院类型不同
				if (this.chooseReservationSelectType == 3) {
					this.isDrop = true
					this.selectHeight = 382
				} else {
					this.isDrop = false
					this.selectHeight = 292
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.reservation_page {
		padding: 0;

		.list {
			padding: 0 30rpx;

			.doctor_item {
				margin-top: 30rpx;
				padding: 30rpx 20rpx;

				.doctor_star {
					display: flex;
					justify-content: space-between;

					.info_star {
						padding: 10rpx 40rpx;
						height: 60rpx;
						line-height: 40rpx;
						text-align: center;
						box-sizing: border-box;
						background-color: #4070FE;
						border-radius: 20rpx;
						font-size: 22rpx;
						color: #FFF;
					}
				}

				.doctor_evaluate {
					display: flex;
					align-items: center;
					margin: 30rpx 0;

					.evaluate {
						margin-right: 20rpx;
						display: flex;
						align-items: center;

						&.star {
							.nums {
								font-weight: bold;
								font-size: 26rpx;
								color: #F1AE34;
							}
						}

						.icon {
							margin-right: 10rpx;
							font-size: 22rpx;
							color: rgba(153, 153, 153, 0.8);

							image {
								width: 26rpx;
								height: 26rpx;
							}
						}

						.nums {
							font-weight: bold;
							font-size: 26rpx;
							color: #333333;
						}
					}
				}


				.doctor_capacity {
					color: #333;
					font-size: 26rpx;

					.text {
						display: inline-block;
						color: #999999;
						margin-right: 10rpx;
					}
				}
			}
		}

		.reservation_select_type {
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.reservation_select_type_item {
				opacity: 0.5;
				flex: 0 0 130rpx;
				width: 130rpx;
				text-align: center;

				&.active {
					opacity: 1;
					transition: all 0.3s;
				}

				.item_icon {
					width: 100%;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item_text {
					font-size: 28rpx;
					color: #333333;
				}
			}
		}

	}
</style>